<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3时钟</title>

<style type="text/css">
body{margin:0px;background:#FFF;}
.clock{width:600px;height:600px;background:#000;margin:50px auto;-moz-border-radius:300px;-webkit-border-radius:300px;border-radius:300px;-moz-box-shadow:5px 5px 8px #999;-webkit-box-shadow:5px 5px 8px #999;box-shadow:5px 5px 8px #999;}
.clock_bg{width:600px;height:500px;background:#000;-moz-border-radius:300px;-webkit-border-radius:300px;border-radius:300px;-moz-box-shadow:5px 5px 8px #999 inset;-webkit-box-shadow:5px 5px 8px #999 inset;box-shadow:5px 5px 8px #999 inset;padding:50px 0px;}
.clock_nr1{width:500px;height:500px;background:#DEDEDE;margin:0px auto;-moz-border-radius:250px;-webkit-border-radius:250px;border-radius:250px;-moz-box-shadow:3px 3px 5px #999;-webkit-box-shadow:3px 3px 5px #999;box-shadow:3px 3px 5px #999;}
.clock_nr2{width:500px;height:500px;background:#DEDEDE;-moz-border-radius:250px;-webkit-border-radius:250px;border-radius:250px;-moz-box-shadow:5px 5px 8px #999 inset;-webkit-box-shadow:5px 5px 8px #999 inset;box-shadow:5px 5px 8px #999 inset;position:relative;}
.spot{position:absolute;top:50%;left:50%;width:2px;height:490px;margin:-245px auto auto -1px;}
.spot span{display:block;width:2px;height:15px;background:#444;position:absolute;display:block;}
.spot .span{display:block;width:4px;height:30px;background:#444;position:absolute;margin-left:-1px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.spot1{position:absolute;top:50%;left:50%;width:20px;height:300px;margin:-150px auto auto -10px;display:inline-block;}
.spot1 div{width:20px;height:160px;background:#000;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.spot2{position:absolute;top:50%;left:50%;width:16px;height:400px;margin:-200px auto auto -8px;}
.spot2 .div1{width:8px;height:100px;background:#000;-moz-border-radius:4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;margin:0px auto;}
.spot2 .div2{width:16px;height:20px;background:#000;-moz-border-radius:5px 5px 3px 3px;-webkit-border-radius:5px 5px 3px 3px;border-radius:5px 5px 3px 3px;}
.spot2 .div3{width:12px;height:80px;background:#000;-moz-border-radius:3px 3px 10px 10px;-webkit-border-radius:3px 3px 10px 10px;border-radius:3px 3px 10px 10px;margin:0px auto;}
.spot3{position:absolute;top:50%;left:50%;width:16px;height:420px;margin:-210px auto auto -8px;}
.spot3 .div1{width:6px;height:260px;background:#c00;-moz-border-radius:3px 3px 0px 0px;-webkit-border-radius:3px 3px 0px 0px;border-radius:3px 3px 0px 0px;margin:0px auto;}
.spot3 .div2{width:16px;height:40px;background:#c00;-moz-border-radius:5px 5px 10px 10px;-webkit-border-radius:5px 5px 10px 10px;border-radius:5px 5px 10px 10px;}

.spot0{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-15px auto auto -15px;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;border:5px solid #c00;background:#8f2c00;background-image:-moz-linear-gradient(top, #ff4f02, #8f2c00);/* Firefox */background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00));/* Saf4+, Chrome */}
.clock_nr2 b{ font-size:58px;color:#4A4A4A;font-style:italic;display:block;width:110px;}
.clock_nr2 .numeral_1{position:absolute;top:60px;left:331px;}
.clock_nr2 .numeral_2{position:absolute;top:132px;left:392px;}
.clock_nr2 .numeral_3{position:absolute;top:218px;left:417px;}
.clock_nr2 .numeral_4{position:absolute;top:313px;left:389px;}
.clock_nr2 .numeral_5{position:absolute;top:381px;left:326px;}
.clock_nr2 .numeral_6{position:absolute;top:401px;left:228px;}
.clock_nr2 .numeral_7{position:absolute;top:381px;left:134px;}
.clock_nr2 .numeral_8{position:absolute;top:313px;left:69px;}
.clock_nr2 .numeral_9{position:absolute;top:218px;left:38px;}
.clock_nr2 .numeral_10{position:absolute;top:132px;left:54px;}
.clock_nr2 .numeral_11{position:absolute;top:60px;left:120px;}
.clock_nr2 .numeral_12{position:absolute;top:32px;left:216px;}
</style>

</head>

<body>

<div class="clock">
	<div class="clock_bg">
		<div class="clock_nr1">
		<div class="clock_nr2">
			<b class="numeral_1">1</b>
			<b class="numeral_2">2</b>
			<b class="numeral_3">3</b>
			<b class="numeral_4">4</b>
			<b class="numeral_5">5</b>
			<b class="numeral_6">6</b>
			<b class="numeral_7">7</b>
			<b class="numeral_8">8</b>
			<b class="numeral_9">9</b>
			<b class="numeral_10">10</b>
			<b class="numeral_11">11</b>
			<b class="numeral_12">12</b>
			<div class="spot1">
				<div></div>
			</div>
			<div class="spot2">
				<div class="div1"></div>
				<div class="div2"></div>
				<div class="div3"></div>
			</div>
			<div class="spot3">
				<div class="div1"></div>
				<div class="div2"></div>
			</div>
			<div class="spot0"></div>
		</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){ 

	for(var i=1;i<61;i++){
		var n = i*6;
        $(".clock_nr2").prepend("<div class='spot' name='"+i+"'><span></span></div>");
		$(".spot[name='"+i+"']").css("-webkit-transform","rotate("+n+"deg)").css("-moz-transform","rotate("+n+"deg)");
		if(i%5==0){
			$(".spot[name='"+i+"'] span").addClass("span");
		}
	}
	
	var date3 = new Date();
	var hour3 = date3.getHours();
	var min3 = date3.getMinutes();
	var sec3 = date3.getSeconds(); 
	var m3 = sec3*6;
	var m2 = min3*6+(m3/60);
	var m1 = hour3*30+(m2/12);
	
	function showclock3(){
         date3 = new Date();
         hour3 = date3.getHours();
         min3 = date3.getMinutes();
         sec3 = date3.getSeconds(); 
		 m3 = sec3*6;
		 m2 = min3*6+(m3/60);
		 m1 = hour3*30+(m2/12);
	 	 $(".spot1").css("-webkit-transform","rotate("+m1+"deg)").css("-moz-transform","rotate("+m1+"deg)");
		 $(".spot2").css("-webkit-transform","rotate("+m2+"deg)").css("-moz-transform","rotate("+m2+"deg)");
		 $(".spot3").css("-webkit-transform","rotate("+m3+"deg)").css("-moz-transform","rotate("+m3+"deg)");
     }
	 
     setInterval(showclock3,1000);
	 
});
</script>

</body>
</html>